<template>
	<section class="container book_list">
		<van-tabs  v-model="categoryActive" @change="onChangeCategory">
			<van-tab v-for="(item,index) in categoryItem" :key="index" :title="item.name" ></van-tab>
		</van-tabs>
		<van-swipe :loop="false" :show-indicators="false" ref="mySwiper">
			<van-swipe-item v-for="(item,index) in categoryItem" :key="index">
				<!--<no-data v-if="categoryItem[categoryActive].isNoData" ></no-data>-->
				<!--<van-list  v-model="categoryItem[categoryActive].loading" :finished="categoryItem[categoryActive].finished" :immediate-check="false"  @load="init">-->
					<!--<div class="bookItem" v-for="(book,bIndex) in categoryItem[categoryActive].bookList" :key="bIndex" @click="gotoBookDetail(book.id)" >-->
						<!--<div class="list_l">-->
							<!--<img v-lazy="book.cover" v-if="book.cover && book.cover!=null"/>-->
							<!--<img src="/images/shuimg.jpg" v-else/>-->
						<!--</div>-->
						<!--<div class="list_r">-->
							<!--<h3>{{book.title}}</h3>-->
							<!--<p>{{book.recommendation}}</p>-->
							<!--<span>{{book.author}}</span>-->
							<!--<em><van-icon name="yanjing" size="1.2rem" style="vertical-align: bottom;"/> {{book.pv}} </em>-->
						<!--</div>-->
					<!--</div>-->
				<!--</van-list>-->
				<book-items :book-category-id="bookCategoryId"></book-items>
			</van-swipe-item>
		</van-swipe>
		<transition name="router-slid" mode="out-in">
		  <router-view></router-view>
		</transition>
	</section>
</template>
<script >
	import {Tab, Tabs, List, Icon, Toast,Cell,Swipe, SwipeItem} from 'vant'
	import {getBookList,getCategoryList} from '../../api/book'
	import noData from './noData'
	import bookItems from './book_items'
export default {
		components: {[Tab.name]: Tab,[Tabs.name]: Tabs,[List.name]: List, [Icon.name]: Icon, [Toast.name]: Toast, [Cell.name]: Cell,
			[Swipe.name]: Swipe,[SwipeItem.name]: SwipeItem,
		noData,bookItems},
	data() {
		return {
			bookList: [],
		    loading: false,
		    finished: false,
			// params:{
             //    bookCategoryId:0,
             //    page: {page: 1, pageSize: 4},
             //    sort: {order: null, sort: null}
			// },
			isNoData:false,
			categoryActive:0,
			categoryItem:[],
			bookCategoryId:"0"
		}
	},
	watch: {
		'categoryActive':function(val,oldVal) {
			this.$refs.mySwiper.swipeTo(val)
			// console.log('[val]',val)
			// console.log('[oldVal]',oldVal)
			// this.init();
		}
	},
	methods: {
		gotoBookDetail(id){
			this.$router.push({name: 'BookDetail',query:{id:id}});
		},
        onChangeCategory(index){
           this.bookCategoryId = this.categoryItem[index].bookCategoryId;
        },
        async getCategoryList(){
		  let resp = await getCategoryList();
		  if(this.qUtil.validResp(resp)){
		      this.categoryItem = resp.data.templateClassifyList;
		      this.categoryItem.splice(0,0,{id:0,bookCategoryId:"0",name:'全部'});
              this.categoryItem.map((e,i)=>{
                  e.loading=false;
                  e.finished=false;
                  e.bookList = [];
                  e.page = {page: 1, pageSize: 6};
                  e.sort= {order: null, sort: null};
                  e.isNoData = false;
                  if(e.id == this.$route.query.id){
                    this.categoryActive = i;
                      // this.categoryItem[this.categoryActive].loading = true;
                    // if(i == 0) this.onChangeCategory(0)
                  }
              })
              // this.init();
          }
        },
        // async init() {
		 //    console.log('[111]')
         //    let category = this.categoryItem[this.categoryActive];
         //    let resp = await getBookList(category);
         //    if(this.qUtil.validResp(resp)){
			// 	if(resp.data.total <=0){
         //            category.isNoData = true;
			// 	    return false;
			// 	}
         //        let list = resp.data.bookList;
         //        if(list && list.length >0){
         //            list.map((e,i)=>{
         //                category.bookList.push(e);
			// 		});
         //            console.log(" category.bookList", category.bookList);
         //            category.page.page ++;
         //        }
         //        console.log(" categoryItem", this.categoryItem);
         //    }
         //    category.loading = false;
         //    if(category.bookList.length >=resp.data.total){
         //        category.finished = true;
			// }
         //    this.categoryItem[this.categoryActive] = category
	    // },
	},
	mounted(){
        this.getCategoryList();
	}

}</script>
<style scoped>
.book_list{
	background: #fff; 
	min-height: 100%;
}
.book_list .van-list{
	padding: 0.8rem 1rem 4rem 1rem;
}

</style>